<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户管理</title>
		<link rel="stylesheet" href="./css/2.css">
		<link rel="stylesheet" href="./css/bootstrap.css">
		<script src="./js/jquery-3.5.1.js"></script>
		<script src="./js/popper.min.js"></script>
		<script src="./js/bootstrap.js"></script>
	</head>
	<body style="background-color: #282b30;">
		<nav class="container-fluid">
		    <div class="row" style="background-color: #40454b;">
		        <div class="h-100  p-0 col-md-10 col-sm-12 m-auto  navbar navbar-fixed-top navbar-expand-lg navbar-light" style="	background-color: #40454b;">
		            <button class="navbar-toggler navbar-toggler-right bg-white" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
		                <span class="navbar-toggler-icon"></span>
		            </button>
		            <a class="navbar-brand text-center text-white m-0 p-0 cqgcxy"><h4 style="font-size: 18px;">重庆工程学院</h4></a>
		            <div class="collapse navbar-collapse col-lg-10 ml-1 " id="navbarTogglerDemo02" style="background-color: #40454b; z-index: 2;">
		                <ul class="navbar-nav nav-tabs col-12 mr-auto mt-2 mt-md-0 m-auto h-100" style="border-bottom:#40454b 1px solid;">
						<li class="nav-item nav-link">
							<p class="mb-0 p-2 text-white">
								<span class="glyphicon glyphicon-home "></span> <a class="text-white text-decoration-none" href="index.html">后台首页</a>
							</p>
						</li>
						<li class="nav-item nav-link badge-dark ">
							<p class="mb-0 p-2 text-white">
								<span class="glyphicon glyphicon-user"></span> <a>用户管理</a>
							</p>
						</li>
						<li class="nav-item nav-link">
							<p class="mb-0 p-2 text-white">
								<span class="glyphicon glyphicon-folder-open"></span> <a class="text-white text-decoration-none" href="content.html">内容管理</a>
							</p>
						</li>
						<li class="nav-item nav-link mr-auto">
							<p class="mb-0 p-2 text-white">
								<span class="glyphicon glyphicon-tags"></span> <a>标签管理</a>
							</p>
							</li>
						<li class="nav-item nav-link cqgcxy list-group dropdown" style="border: 0;">
							<p class="mb-0 p-2  dropdown-toggle text-white" data-toggle="dropdown" style="cursor: pointer;">admin</p>
								<div class="dropdown-menu">
									<a class="dropdown-item badge-dark jungle" href="#">Jungle</a>
									<a class="dropdown-item" href="#" >江林峰</a>
								</div>
						</li>
						<li class="nav-item nav-link text-white" style="border: 0;"><p class="mb-0 p-2"><span class="glyphicon glyphicon-off"></span> <a>退出</a></p></li>
		                </ul>
		            </div>
		        </div>
		    </div>
		</nav>
		<article class="container mt-5">
			<div class="row">
				<div class="col-md-12 col-sm-12">
					<div class="text-white" style="line-height: 40px; border-bottom:1px #FFFFFF solid"id="br">用户管理</div>
					<ul class="nav nav-tabs" id="cgclo">
						<li class="nav-item border gluser"><a href="#usergl" data-toggle="tab" class="nav-link text-white text-decoration-none">用户管理</a></li>
						<li class="nav-item border finduser"><a href="#whereay" data-toggle="tab" class="nav-link text-white text-decoration-none">用户搜索</a></li>
						<li class="nav-item border adduser"><a data-toggle="modal" data-target="#exampleModal3" class="nav-link text-white text-decoration-none">添加用户</a></li>
					</ul>
					<div class="tab-content">
						<div class="tab-pane active" id="usergl">
							<table class="table table-bordered text-white"style="background-color:#3f444d ;">
							  <thead>
								  <tr class="trborder">
								    <th>ID</th>
								    <th>邮箱</th>
								    <th>用户</th>
								    <th>操作</th>
								  </tr>
							   </thead>
							  <tbody class="tbody1">
							  </tbody>
							</table>
							<div class="row">
								<div class="col-6"></div>
								<ul class="pagination col-md-6 col-sm-12 row">
									<li class="btn-dark col-2 prev"><a class="text-center text-white">&laquo;</a></li>
									<li class="btn-dark col-2"><a class="text-center text-white ml-3" href="#">1</a></li>
									<li class="btn-dark col-2"><a class="text-center text-white ml-3" href="#">2</a></li>
									<li class="btn-dark col-2"><a class="text-center text-white ml-3" href="#">3</a></li>
									<li class="btn-dark col-2"><a class="text-center text-white ml-3" href="#">4</a></li>
									<li class="btn-dark col-2 next"><a class="text-center text-white ml-3" href="#">&raquo;</a></li>
								</ul>
							</div>
						</div>
						<div class="tab-pane m-2"style="background-color: #3f444d;" id="whereay">
							<div class="mt-2 p-2">
								<div class="alert alert-primary">
									<strong>技巧提示:</strong>不支持模糊搜索和匹配搜索，匹配搜索使用*代替!
								</div>
								<div class="form-group">
									<label class="text-white" for="name">名称:</label>
									<input type="text" value="" class="form-control " id="name1" placeholder="请输入名称">
								</div>
								<div class="form-group">
									<label class="text-white id1" for="name">UID:</label>
									<input type="text" value="" class="form-control" id="id1" placeholder="请输入ID">
								</div>
								<div class="form-group"> 
									<label class="text-white" for="name">选择用户组</label>
									<input list="list" class="form-control" id="input1"/>
									<datalist id="list" class="w-100">
										<option id="type1">普通用户</option>
										<option id="type1">vip用户</option>
										<option id="type1">季卡vip用户</option>
										<option id="type1">年卡vip用户</option>
									</datalist>
								</div>
								<div class="form-group">
									<div class="btn btn-block border text-white look-from" data-toggle="modal" data-target="#exampleModal1">提交</div>
								</div>
							</div>
						</div>
						<div class="modal fade" id="exampleModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModal1Label" aria-hidden="true">
						  <div class="modal-dialog" role="document">
						    <div class="modal-content">
						      <div class="modal-header">
						        <h5 class="modal-title" id="exampleModal1Label">搜索结果</h5>
						        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
						          <span aria-hidden="true" class="closeFind">×</span>
						        </button>
						      </div>
						      <div class="modal-body1">
							  </div>
							  </div>
							</div>
						</div>
						<div class="modal fade" id="exampleModal3" tabindex="-1" role="dialog" aria-labelledby="exampleModal3Label" aria-hidden="true">
						  <div class="modal-dialog" role="document">
						    <div class="modal-content">
						      <div class="modal-header">
						        <h5 class="modal-title" id="exampleModal3Label">添加用户</h5>
						        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
						          <span aria-hidden="true">×</span>
						        </button>
						      </div>
						      <div class="modal-body">
						        <div class="form-group">
						        	<label for="name">用户名：</label>
						        	<input type="text" class="form-control" id="name" placeholder="请输入名称">
						        </div>
						        <div class="form-group">
						        	<label for="name">用户密码：</label>
						        	<input type="text" type="password" class="form-control" id="pwd" placeholder="请输入密码">
						        </div>
								<div class="form-group">
									<label for="name">请输入用户邮箱</label>
									<input type="text" type="email" class="form-control" id="email" placeholder="请输入邮箱">
								</div>
						        <div class="form-group"> 
						        	<label for="name">选择用户组</label>
						        	<input list="list" id="type" class="form-control" />
						        	<datalist id="list" class="w-100">
						        		<option>普通用户</option>
						        		<option>vip用户</option>
						        		<option>季卡vip用户</option>
						        		<option>年卡vip用户</option>
						        	</datalist>
						        </div>
						      </div>
						      <div class="modal-footer">
						        <button type="button" class="btn btn-secondary" data-dismiss="modal">退出</button>
						        <button type="button" class="btn btn-primary" data-dismiss="modal" id="addUser">添加</button>
						      </div>
						    </div>
						  </div>
						</div>
						<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModal3Label" aria-hidden="true">
						  <div class="modal-dialog" role="document">
						    <div class="modal-content">
						      <div class="modal-header">
						        <h5 class="modal-title" id="exampleModal2Label">修改用户</h5>
						        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
						          <span aria-hidden="true">×</span>
						        </button>
						      </div>
						      <div class="modal-body">
						        <div class="form-group">
						        	<label for="name">用户名：</label>
						        	<input type="text" class="form-control name1" id="name1" value="6666">
						        </div>
						        <div class="form-group">
						        	<label for="name">用户密码：</label>
						        	<input type="text" type="password" class="form-control pwd1" id="pwd1">
						        </div>
								<div class="form-group">
									<label for="name">请输入用户邮箱</label>
									<input type="text" type="email" class="form-control email1" id="email1">
								</div>
						        <div class="form-group"> 
						        	<label for="name">选择用户组</label>
						        	<input list="list" id="type1" class="form-control type1" />
						        	<datalist id="list" class="w-100">
						        		<option>普通用户</option>
						        		<option>vip用户</option>
						        		<option>季卡vip用户</option>
						        		<option>年卡vip用户</option>
						        	</datalist>
						        </div>
						      </div>
						      <div class="modal-footer">
						        <button type="button" class="btn btn-secondary" data-dismiss="modal">退出</button>
						        <button type="button" class="btn btn-primary" data-dismiss="modal" id="changeUser">修改</button>
						      </div>
						    </div>
						  </div>
						</div>
		</article>
		<footer class="container">
			<div class="row" style="border-top:1px #F7F7F7 dashed;">
				<a class="col-md-4 col-sm-12 m-auto text-center text-white" style="line-height: 100px;">Cqgcxy-Jungl @2019-2020</a>
			</div>
		</footer>
	</body>
<script type="text/javascript">
	$(function(){
		//用户数据
?? ??? ??? ?$.ajax({
	?? ??? ??? ?type : "POST",
?? ??? ??? ??? ?url : "http://127.0.0.1:7300/mock/5ee726335689e30fcccf5593/user",
?? ??? ??? ??? ?async : false,
?? ??? ??? ??? ?dataType : "json",
?? ??? ??? ??? ?success : function(msg) {?? 
					a = msg.data
?? ??? ??? ??? ?},
?? ??? ??? ?})
			for(i in a){
				let div
				div = `<tr class="trborder removeTR">
				<td class="table1 id">${a[i].id}</td>
				<td class="email">${a[i].email}</td>
				<td class="namea">${a[i].name}</td>
				<td>
					<div class="dropdown">
					  <button class="btn btn-secondary dropdown-toggle"
					          type="button" id="dropdownMenu1" data-toggle="dropdown"
					          aria-haspopup="true" aria-expanded="false">
					    操作
					  </button>
					  <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
					    <a class="dropdown-item change" href="#!" data-toggle="modal" data-target="#exampleModal2">更改</a>
					    <a class="dropdown-item delete" href="#!">删除</a>
					  </div>
					</div>
				</td>
				</tr>`
				$(".tbody1").append(div)
			}
			//更改
			$(".change").click(function(){
			let changTr = $(this).parents(".removeTR")
			let changId = $(this).parents(".removeTR").children(".id").html()
			let changId1 = $(this).parents(".removeTR").children(".id")
			let changName = $(this).parents(".removeTR").children(".namea")
			let changEm = $(this).parents(".removeTR").children(".email")
			let change = []
			a.forEach((item)=>{
				if(item.id == changId){
					change.push(item)
				}
			})
			
			$(".name1").val(change[0].name)
			$(".pwd1").val(change[0].passwoed)
			$(".email1").val(change[0].email)
			$(".type1").val(change[0].type)
				$("#changeUser").click(function(){
					debugger
					$(changName[0]).html($(".name1").val())
					$(changEm[0]).html($(".email1").val())
				})
			})
			
			//删除
			$(".delete").click(function(){
				$(this).parents(".removeTR").remove()
				let ye = 0
				let length = 10
				$(".tbody1 tr").hide().slice(ye*length,(ye+1)*length).show()
				$(".pagination li").not($(".prev"),$(".next")).click(function(){
					ye = $(this).children().html()-1
					$(".tbody1 tr").hide().slice(ye*length,(ye+1)*length).show()
				})
			})
				//分页
				let ye = 0
				let length = 10
				$(".tbody1 tr").hide().slice(ye*length,(ye+1)*length).show()
				$(".pagination li").not($(".prev"),$(".next")).click(function(){
					ye = $(this).children().html()-1
					$(".tbody1 tr").hide().slice(ye*length,(ye+1)*length).show()
				})
				//颜色
				
				$(".gluser").click(()=>{
					$("#br").html("用户管理")
				})
				$(".finduser").click(()=>{
					$("#br").html("用户搜索")
				})
				$(".adduser").click(()=>{
					$("#br").html("添加用户")
				})
		
			//搜索
			$.ajax({
				type:"POST",
				url:"http://127.0.0.1:7300/mock/5ee726335689e30fcccf5593/user",
				data:"",
				success: function(msg){
					let newlist = msg.data
					let tbody = $(".modal-body1")
					$(".look-from").click(function(){
						tbody.find('table').remove()
						let findName = $("#name1").val()
						let findId = $("#id1").val()
						let findType = $("#input1").val()
						let nameList = []
						let idList = []
						let typeList = []
						newlist.forEach((item)=>{
							nameList.push(item.name)
							idList.push(item.id)
							typeList.push(item.type)
						})
						// console.log(typeList)
						// console.log(findType)
						let arr = []
						let brr = []
						let crr = []
						for(let i=0;i<newlist.length;i++){
							if(nameList[i].match(findName) != null){
								arr.push(nameList[i])
							}if(idList[i].match(findId) != null){
								brr.push(idList[i])
							}if(typeList[i] == findType){
								crr.push(typeList[i])
							}
						}
						// console.log(arr)
						// console.log(brr)
						console.log(crr)
						var all = []
						// for(let i=0;i<arr.length;i++){
						// 	newlist.forEach((item)=>{
						// 		if(arr[i]==item.name || brr[i]==item.id || crr[i]==item.type){
						// 			all.push(item)
						// 		}
						// 	})
						// }
						if(findId == "" && findType == ""){
							for(let i=0;i<arr.length;i++){
								newlist.forEach((item)=>{
									if(arr[i]==item.name){
										all.push(item)
									}
								})
							}
						}if(findName == "" && findType == ""){
							for(let i=0;i<brr.length;i++){
								newlist.forEach((item)=>{
									if(brr[i]==item.id){
										all.push(item)
									}
								})
							}
						}if(findName == "" && findId == ""){
							for(let i=0;i<crr.length;i++){
								newlist.forEach((item)=>{
									if(crr[i]==item.type){
										all.push(item)
									}
								})
							}
						}
						// console.log(all)
						for(i in all){
							let div
							div = `
							<table border="1" style="margin:0 auto; width:100%">
							<tr>
								<td>name:${all[i].name}</td>
							</tr>
							<tr>
								<td>UID:${all[i].id}</td>
							</tr>
							<tr>
								<td>会员类型:${all[i].type}</td>
							</tr><tr>
								<td>电子邮箱:${all[i].email}</td>
							</tr>
							</table>
							`
							tbody.append(div)
						}


						
					})
					$("#input1").click(function(){
						$("#input1").val('')
					})
					$(".closeFind").click(function(){
						tbody.find('table').remove()
						$("#name1").val('')
						$("#id1").val('')
					})
					
				}
			})
			// 添加用户
			$("#addUser").click(function(){
				let name = $("#name").val()
				let email = $("#email").val()
				let pwd = $("#pwd").val()
				let type = $("#type").val()
				let data = new Object()
				data.id=Math.floor(Math.random()*99999999)
				data.email=email
				data.name=name
				data.password=pwd
				data.type=type
				let jsonData = JSON.stringify(data)
				$.ajax({
					type:"POST",
					url:"http://127.0.0.1:7300/mock/5ee726335689e30fcccf5593/user",
					data:jsonData,
					contentType:"application/json",
					dataType:"json",
					success: function(data,suc){
						console.log(data)
						alert(suc)
					}
				})
			})
	})
</script>
</html>
